<template>
  <div class="container">
    <router-view></router-view>
    <div class="index">
      <Header />
      <div class="main-center2">
        <div class="main-left">
          <div class="con2">
            <div class="nav-tit">
              <div class="mleft">
                <dl class="filt">
                  <dd :class="{ cur: type == 0 }" @click="getCatList(0, 1, 1, keyword)">全部</dd>
                  <dd :class="{ cur: type == 1 }" @click="getCatList(1, 1, 1, keyword)">公开</dd>
                  <dd :class="{ cur: type == 2 }" @click="getCatList(2, 1, 1, keyword)">本校</dd>
                </dl>
              </div>
              <div class="mright fr">
                <el-input
                  v-model="keyword"
                  style="width: 223px;"
                  class="fl search-inp"
                  placeholder="输入名称搜索"
                ></el-input>
                <el-button class="fl" @click="getCatList(type, 1, 1, keyword)">搜索</el-button>
              </div>
            </div>
            <div class="clear"></div>

            <ul class="bkb-list" v-if="listData.length > 0">
              <template v-for="(item, i) in listData">
                <li>
                  <img
                    class="pic"
                    @click="goPlay(i, item)"
                    :src="item.image_cover"
                    width="100%"
                    height="130px"
                  />
                  <div class="flex_waper">
                    <div class="f_title">{{ item.title }}</div>
                    <div class="f_icon">
                      <img
                        class="pic-download fr"
                        @click="isDownloadBkb = true; currentDownload = item"
                        src="static/img/l-download.png"
                      />
                      <img
                        class="pic-download fr"
                        @click="quoteClass(item)"
                        src="static/img/l-share.png"
                      />
                    </div>
                  </div>
                  <div
                    class="flex_waper"
                    style="display:flex;justify-content:space-between;margin-bottom: 10px;font-size:12px"
                  >
                    <div>
                      <label class="f_kj">{{ item.cat_name }}</label>
                    </div>
                    <div>
                      <label class="f_kj">课件：{{ item.number }}</label>
                    </div>
                  </div>
                  <div class="flex_waper" style="font-size:12px">
                    <div>
                      <span class="tit">分享：{{ item.nickname }}</span>
                    </div>

                    <div>{{ item.createtime_text }}</div>
                  </div>
                </li>
              </template>
            </ul>
            <el-empty :image-size="200" v-else></el-empty>

            <div class="page-area" v-if="listData.length > 0">
              <span
                type="button"
                class="btn-home fl"
                style="cursor: pointer;"
                @click="getCatList(categoryId, current, 1, keyword)"
              >首页</span>
              <el-pagination
                background
                layout="  prev, pager, next "
                :current-page="currentPage"
                :total="total"
                :page-size="1"
                @current-change="handleCurrentChange"
              ></el-pagination>
              <span
                type="button"
                style="cursor: pointer;"
                class="btn-last fr"
                @click="getCatList(categoryId, current, total, keyword)"
              >尾页</span>
            </div>
          </div>
        </div>
        <div class="main-right">
          <div class="con-menu" @click="goShare()">
            <div class="menu-img">
              <img src="static/img/t-myshare.png" alt />
            </div>
            <div class="menu-item">我的分享</div>
          </div>

          <div class="con-menu2" @click="goBack()">
            <div class="menu-img">
              <img src="static/img/r-back.png" alt />
            </div>
            <div class="menu-item">返回</div>
          </div>
          <div class="con-menu2" @click="goHome()">
            <div class="menu-img">
              <img src="static/img/r-home.png" alt />
            </div>
            <div class="menu-item">首页</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 分享 -->
    <div class="selectChapter uploadDig" v-if="isShare == true">
      <div class="title">
        分享
        <span class="closed" @click="isShare = false">
          <img src="static/img/close.png" />
        </span>
      </div>
      <div class="cont">
        <div class="space-tj">请选择分享位置</div>
        <ul style="height: 250px;">
          <li class="mt30">
            <el-select style="width: 100%;" v-model="group_id" placeholder="请选择">
              <el-option label="全网" value="1"></el-option>
              <el-option label="本校" value="2"></el-option>
            </el-select>
          </li>
        </ul>
        <div class="mt30 baseAct width100">
          <button class="cancel" type="info" @click="isShare = false">取消</button>
          <button @click="shareLiqr()" class="sure">确定</button>
        </div>
      </div>
    </div>

    <div class="step_task" v-if="isOpen == true">
      <div class="do">
        <img src="static/img/t-down.png" alt />
      </div>
      <ul>
        <li class="loading">
          正在打包备课包
          <span class="fr">6年级国学课</span>
        </li>
        <li class="ok">
          正在打包备课包
          <span class="fr">6年级国学课</span>
        </li>
        <li class="loading">
          正在打包备课包
          <span class="fr">6年级国学课</span>
        </li>
        <li class="ok">
          正在打包备课包
          <span class="fr">6年级国学课</span>
        </li>
      </ul>
    </div>

    <!-- 下载弹出层 -->
    <div class="myDig" v-if="isDownloadBkb == true">
      <div class="title">
        提示
        <span class="closed" @click="isDownloadBkb = false">
          <img src="static/img/closed.png" />
        </span>
      </div>
      <div class="cont">
        <p class="cont-tip">是否下载该资源包</p>
        <div class style="display: flex;justify-content: space-around;width: 100%;">
          <a class="downloadBtn" @click="isDownloadBkb = false">取消</a>
          <a class="downloadBtn" @click="isDownloadBkb = false" :href="currentDownload.zippath">确定</a>
        </div>
      </div>
    </div>

    <div class="selectChapter share-all-play" v-if="isOpen6 == true" style="height:820px;">
      <div class="cont" style="height:810px;">
        <div class="m-left3 bor-r">
          <div class="szy">
            <div class="fh" @click="isOpen6 = false">
              <img src="static/img/yinyong.png" />
              返回
            </div>
            <ul>
              <template v-for="(vo, j) in resourceData">
                <li :class="{ cur: play_id == vo.id }" @click="playLi(j)">
                  <img :src="vo.image_cover" />
                  {{ vo.bname }}
                </li>
              </template>
            </ul>
          </div>
        </div>
        <div class="m-center44">
          <div class="play_area">
            <!-- 视频音频 -->
            <div
              id="course-player"
              v-if="getFileType(currentZiyuan.file) == 'video' || getFileType(currentZiyuan.file) == 'radio'"
            ></div>
            <!-- office文件 -->
            <iframe
              class="course-iframe"
              :src="'https://ow365.cn/?i=28004&ssl=1&n=5&furl=' + currentZiyuan.file"
              v-else-if="
                getFileType(currentZiyuan.file) == 'excel' ||
                  getFileType(currentZiyuan.file) == 'word' ||
                  getFileType(currentZiyuan.file) == 'pdf' ||
                  getFileType(currentZiyuan.file) == 'ppt'
              "
            ></iframe>
            <!-- 图片 -->
            <div v-else-if="getFileType(currentZiyuan.file) == 'image'">
              <img :src="currentZiyuan.file" />
            </div>

            <!-- swf文件 -->
            <template v-else-if="getFileType(currentZiyuan.file) == 'swf'">
              <object
                :data="currentZiyuan.file"
                type="application/x-shockwave-flash"
                style="width: 100%;height: 100vh;"
              >
                <param name="movie" value="demo.swf" style="width: 100%;height: 100vh;" />
                <embed :src="currentZiyuan.file" style="width: 100%;height: 100vh;" />
              </object>
            </template>
          </div>
        </div>
      </div>
      <div class="mt10 baseAct" style="margin-top: -50px;">
        <button @click="playLi(play_index - 1)" class="sure">上一页</button>
        <label>{{ play_index+1 }}/{{ resourceData.length }}</label>
        <button @click="playLi(play_index + 1)" class="sure">下一页</button>
      </div>
      <div class="arrow-right"></div>
    </div>
  </div>
</template>

<script>
var player
import Header from '../../components/header.vue'
export default {
  data() {
    return {
      isOpen: false,
      isShare: false,
      group_id: '',
      itemId: '',
      total: 0,
      page: 1,
      page_size: 12,
      current: -1,
      categoryId: '',
      currentPage: 1,
      type: 0, //0=>全部，1=>全网，2=>本校
      sort: '',
      isOpen6: false,
      keyword: '',
      listData: [],
      resourceData: [],
      currentZiyuan: {},
      isDownloadBkb: false,
      currentDownload: {},
      play_index: 0,
    }
  },
  created() {
    this.handleCurrentChange(1)
  },
  methods: {
    share(i, item) {
      this.isShare = true
      this.itemId = item.id
    },
    goPlay(i, item) {
      this.isOpen6 = true
      this.getBeikeList(item.bclass_id)
    },

    getBeikeList(bid) {
      this.$api('resources.beikelist', { bid: bid }).then((res) => {
        //this.title = res.data.bclass.title;
        this.resourceData = res.data.resource_list
        this.playLi(0)
      })
    },

    playLi(index) {
      if (index < 0) {
        index = 0
      } else if (index > this.resourceData.length) {
        index = this.resourceData.length
      }
      this.play_index = index
      this.currentZiyuan = this.resourceData[index]
      this.play_id = this.currentZiyuan.id
      if (
        this.getFileType(this.currentZiyuan.file) == 'video' ||
        this.getFileType(this.currentZiyuan.file) == 'radio'
      ) {
        this.aliplay(this.currentZiyuan.file)
      }
    },
    quoteClass(item) {
      this.$api('resources.quoteClass', { id: item.bclass_id }).then((res) => {
        if (res.code == 1) {
          //点击引用，引用完成提示改为“您可在我的备课包查看引用资源”
          this.$message.success('您可在我的备课包查看引用资源')
        } else if (res.code == 0) {
          this.$message({
            message: res.msg,
            type: 'warning',
          })
        }
      })
    },
    shareLiqr() {
      this.$api('resources.share', {
        id: this.itemId,
        type: this.group_id,
      }).then((res) => {
        this.isShare = false
        if (res.code == 1) {
          this.$message.success(res.msg)
        } else if (res.code == 0) {
          this.$message({
            message: res.msg,
            type: 'warning',
          })
        }
      })
    },
    getCatList(type, index, page = 1, keyword) {
      if (page == 1) {
        this.currentPage = 1
      } else if (page == this.total) {
        this.currentPage = this.total
      }
      this.page = page
      this.type = type
      this.current = index
      this.keyword = keyword

      let all_form = {
        token: this.token,
        page: this.page,
        limit: this.page_size,
        type: this.type,
        search: this.keyword,
      }
      this.$api('resources.getShareList', all_form).then((res) => {
        this.listData = res.data.data
        this.total = res.data.last_page
      })
    },
    handleCurrentChange(page) {
      console.log(page)
      this.currentPage = page
      this.getCatList(this.type, this.current, page, this.keyword)
    },
    shareLi(index, item, type) {
      this.listData[index].isShare = 1
    },
    downloadLi(index, item) {
      this.isDownloadBkb = true
      this.currentDownload = item
    },
    editLi(index, item) {
      this.$router.push('/lessonsadd')
    },
    delLi(index, item) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$api('resources.delBclass', { id: item.id }).then((res) => {
            if (res.code == 1) {
              this.$message.success(res.msg)
              this.form = {}
              this.handleCurrentChange(1)
            } else if (res.code == 0) {
              this.$message({
                message: res.msg,
                type: 'warning',
              })
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },

    // 阿里云视频播放
    aliplay(file) {
      if (player) {
        player.dispose()
      }

      const saveTime = function (memoryVideo, currentTime) {
        localStorage.setItem(memoryVideo, currentTime)
      }

      const getTime = function (memoryVideo) {
        return localStorage.getItem(memoryVideo)
      }
      this.$nextTick(() => {
        player = new Aliplayer(
          {
            id: 'course-player',
            source: file,
            width: '100%',
            height: '726px',
            autoplay: true,
            isLive: false,
            components: [
              {
                name: 'MemoryPlayComponent',
                type: AliPlayerComponent.MemoryPlayComponent,
                args: [false, getTime, saveTime],
              },
            ],
            skinLayout: [{
                  name: 'controlBar',
                  align: 'blabs',
                  x: 0,
                  y: 0,
                  children: [{
                    name: 'progress',
                    align: 'blabs',
                    x: 0,
                    y: 44
                  },
                  {
                    name: 'playButton',
                    align: 'tl',
                    x: 15,
                    y: 12
                  },
                  {
                    name: 'timeDisplay',
                    align: 'tl',
                    x: 10,
                    y: 7
                  },
                  {
                    name: 'fullScreenButton',
                    align: 'tr',
                    x: 10,
                    y: 12
                  },
                  {
                    name: 'volume',
                    align: 'tr',
                    x: 5,
                    y: 10
                  }
                  ]
                }]
          },
          function (player) {
            console.log('The player is created')
          }
        )
      })
    },
    getFileType(fileName) {
      // 后缀获取
      let suffix = ''
      // 获取类型结果
      let result = ''
      try {
        const flieArr = fileName.split('.')
        suffix = flieArr[flieArr.length - 1]
      } catch (err) {
        suffix = ''
      }
      // fileName无后缀返回 false
      if (!suffix) {
        return false
      }
      suffix = suffix.toLocaleLowerCase()
      // 图片格式
      const imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif']
      // 进行图片匹配
      result = imglist.find((item) => item === suffix)
      if (result) {
        return 'image'
      }
      // 匹配txt
      const txtlist = ['txt']
      result = txtlist.find((item) => item === suffix)
      if (result) {
        return 'txt'
      }
      // 匹配 excel
      const excelist = ['xls', 'xlsx']
      result = excelist.find((item) => item === suffix)
      if (result) {
        return 'excel'
      }
      // 匹配 word
      const wordlist = ['doc', 'docx']
      result = wordlist.find((item) => item === suffix)
      if (result) {
        return 'word'
      }
      // 匹配 pdf
      const pdflist = ['pdf']
      result = pdflist.find((item) => item === suffix)
      if (result) {
        return 'pdf'
      }
      // 匹配 ppt
      const pptlist = ['ppt', 'pptx']
      result = pptlist.find((item) => item === suffix)
      if (result) {
        return 'ppt'
      }
      // 匹配 视频
      const videolist = [
        '3gp',
        'asf',
        'avi',
        'dat',
        'dv',
        'flv',
        'f4v',
        'gif',
        'm2t',
        'm3u8',
        'm4v',
        'mj2',
        'mjepg',
        'mkv',
        'mov',
        'mp4',
        'mpe',
        'mpg',
        'mpeg',
        'mts',
        'ogg',
        'qt',
        'rm',
        'rmab',
        'ts',
        'vob',
        'wmv',
        'webm',
      ]
      result = videolist.find((item) => item === suffix)
      if (result) {
        return 'video'
      }
      // 匹配 音频
      const radiolist = [
        'aac',
        'ac3',
        'acm',
        'amr',
        'ape',
        'caf',
        'flac',
        'm4a',
        'mp3',
        'ra',
        'wav',
        'wma',
      ]
      result = radiolist.find((item) => item === suffix)
      if (result) {
        return 'radio'
      }
      // 匹配 swf
      const swflist = ['swf']
      result = swflist.find((item) => item === suffix)
      if (result) {
        return 'swf'
      }
      // 其他 文件类型
      return 'other'
    },
    goBack() {
      this.$router.go(-1)
    },
    goShare() {
      this.$router.push('/bkbshare')
    },
    goLessons() {
      this.$router.push('/lessonsList')
    },
    goRes() {
      this.$router.push('/courseList')
    },
    goBkb2() {
      this.$router.push('/bkblist2')
    },
    goHome() {
      this.$router.push(localStorage.getItem('jump_path'))
      // this.$router.push('/index');
    },
  },
  components: { Header },
}
</script>

<style lang="scss" scoped>
/deep/ .el-input__inner {
  height: 36px;
  line-height: 35px;
  outline: 0;
}
.cont-tip {
  margin-bottom: 100px;
}
.downloadBtn {
  background: #55e4c2;
  padding: 0 22px;
  height: 36px;
  line-height: 36px;
  color: #ffffff;
  font-size: 18px;
  border-radius: 6px;
  line-height: 36px;
  cursor: pointer;
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.stopM {
  animation: rotate 3s linear infinite;
  animation-play-state: paused;
}

.playM {
  animation: rotate 3s linear infinite;
  animation-play-state: running;
}
.flex_waper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  box-sizing: border-box;
  .f_title {
    line-height: 34px;
    font-size: 16px;
  }
  .f_icon {
    img {
      margin-left: 6px;
    }
  }
  .f_kj {
    line-height: 26px;
  }
}
.tit {
  font-size: 12px;
}
.main-left {
  height: auto !important;
}
</style>
